<script setup lang="ts">
import { onUnmounted, ref, watch, reactive } from "vue";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import ReTable from "@/components/ReTable/index.vue";
import ReHeaderSearch from "@/components/ReHeaderSearch/index.vue";
import { useSettingStoreHook } from "@/store/modules/settings";
defineOptions({
  name: "withdrawRecordList"
});
interface ValueType {
  val: {
    buttonType: string;
  };
  row: object;
}
interface RuleForm {
  status: string;
  id_start: string;
  id_end: string;
  memo: string;
}
const pureSetting = useSettingStoreHook();
const dialogVisible = ref(false);
const resetButtonInfo = () => {
  pureSetting.setButtonInfo("");
};
const isCustomIds = ref(false); //是否指定ID
const ids = ref<string>("");
onUnmounted(() => {
  resetButtonInfo();
});
watch(
  () => pureSetting.buttonInfo,
  (newValue, oldValue) => {
    if (Object.keys(newValue).length !== 0) {
      let value = newValue as ValueType;
      switch (value.val.buttonType) {
        case "edit":
          dialogTitle.value = "提现状态审核";
          dialogVisible.value = true;
          isCustomIds.value = false;
          break;
      }
    }
  },
  {
    immediate: true,
    deep: true
  }
);
const statusOptions = [
  {
    label: "审核成功",
    value: "0"
  },
  {
    label: "审核失败",
    value: "1"
  }
];
const form = reactive({
  status: "0",
  id_start: "",
  id_end: "",
  memo: "您的提现已到账！"
});
const formLabelWidth = "100px";
const ruleFormRef = ref<FormInstance>();
const dialogTitle = ref("提现状态审核");
const rules = reactive<FormRules<RuleForm>>({
  status: [{ required: true, message: "请选择审核状态", trigger: "blur" }],
  id_start: [{ required: true, message: "请输入起始ID", trigger: "blur" }],
  id_end: [{ required: true, message: "请输入结束ID", trigger: "blur" }],
  memo: [{ required: true, message: "请输入备注内容", trigger: "blur" }]
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      resetForm(formEl);
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  resetButtonInfo();
  dialogVisible.value = false;
  isCustomIds.value = false;
};
// 是否指定ID
const handleCustomCheck = () => {
  console.log("handleCustomCheck");
  isCustomIds.value = true;
  dialogVisible.value = true;
  dialogTitle.value = "指定ID提现状态审核";
};
// 审核选中
const handleAllCheck = (ids: string) => {
  console.log("handleAllCheck", ids);
  dialogVisible.value = true;
  isCustomIds.value = false;
  dialogTitle.value = "选中提现状态审核";
};
</script>
<template>
  <div class="withdraw-record-list-container">
    <el-card shadow="hover" class="mb-2">
      <ReHeaderSearch tableType="withdrawRecordList" />
    </el-card>
    <ReTable
      type="withdrawRecordList"
      all-check-btn-text="审核选中"
      custom-check-btn-text="指定ID审核"
      class="content-body"
      @customCheck="handleCustomCheck"
      @allCheck="handleAllCheck"
    />
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500">
      <el-form
        ref="ruleFormRef"
        :model="form"
        :rules="rules"
        @close="resetForm"
      >
        <el-form-item
          label="审核状态"
          prop="status"
          :label-width="formLabelWidth"
        >
          <el-select v-model="form.status" placeholder="请选择审核状态">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <div v-if="isCustomIds">
          <el-form-item
            label="起始ID"
            prop="id_start"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.id_start"
              placeholder="请输入起始ID"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="结束ID"
            prop="id_end"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.id_end"
              placeholder="请输入结束ID"
              autocomplete="off"
            />
          </el-form-item>
        </div>
        <el-form-item
          label="备注内容"
          prop="memo"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.memo" type="textarea" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            确认
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
